<style>
.wmd-panel {margin-left:106px;width:670px;}
.wmd-preview {background-color:#F8F8F8;width:660px;padding:3px;border:2px dotted #CCC;margin-top:20px;}
.wmd-preview p{margin:0 0 .5em 0!important;padding:0!important;}
.wmd-button-row {position: relative;margin:10px 5px 5px 5px!important;padding:0!important;height:20px;}
.wmd-spacer {width: 1px;height: 20px;margin-left: 14px;position: absolute;background-color: Silver;display: inline-block;list-style: none;}
.wmd-button {width: 20px;height: 20px;padding:0 2px 0 3px;position: absolute;display: inline-block;list-style: none;cursor: pointer;}
.wmd-button > span {background: url("{{ MEDIA_URL }}images/wmd-buttons.png") no-repeat;width:20px;height:20px;display:inline-block}
.wmd-spacer1 {left:50px;}
.wmd-spacer2 {left:175px}
.wmd-spacer3 {left:300px;}
.wmd-prompt-background {background-color:#000;}
.wmd-prompt-dialog {border:1px solid #999;background-color: #F5F5F5;}
.wmd-prompt-dialog > form > input[type="text"] {border: 1px solid #999;color:#000;}
.wmd-prompt-dialog > form > input[type="button"]{border: 1px solid #888;font-weight:bold;}
.wmd-input {width:660px;height:200px;}
#wmd-input {font-family:Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;}
.wmd-prompt-dialog.image {padding:10px;position:fixed;width:400px;height:120px;top:50%;left:50%;margin: -60px 0 0 -200px;z-index:1001;}
.wmd-prompt-dialog.image input[type="button"] {border: 1px solid #888;font-weight:bold;margin:10px;width:7em;}
.tabs {float:left;width:160px;line-height:24px;}
.cont {float:left;width:140px;}
</style>
<script src="{{ MEDIA_URL }}js/wmd.min.js"></script>
<fieldset class="module aligned {{ fieldset.classes }}">
    {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
    {% if fieldset.description %}
        <div class="description">{{ fieldset.description|safe }}</div>
    {% endif %}
    {% for line in fieldset %}
        <div class="form-row{% if line.fields|length_is:'1' and line.errors %} errors{% endif %}{% for field in line %} {{ field.field.name }}{% endfor %}">
            {% if line.fields|length_is:'1' %}{{ line.errors }}{% endif %}
            {% for field in line %}
                <div{% if not line.fields|length_is:'1' %} class="field-box{% if not field.is_readonly and field.errors %} errors{% endif %}"{% endif %}>
                    {% if not line.fields|length_is:'1' and not field.is_readonly %}{{ field.errors }}{% endif %}
                    {% if field.is_checkbox %}
                        {{ field.field }}{{ field.label_tag }}
                    {% else %}
                        {{ field.label_tag }}
                        {% if field.is_readonly %}
                            <p>{{ field.contents }}</p>
                        {% else %}
							{% if field.field.html_name == 'markdown' %}
								<div class="wmd-panel">
									<div id="wmd-button-bar"></div>
									<textarea id="wmd-input" class="wmd-input" name="markdown" class="vLargeTextField">{{ field.field.value|default_if_none:"" }}</textarea>
								</div>
								<div id="wmd-preview" class="wmd-panel wmd-preview"></div>
                <script id="image-popup-tpl" type="text/tpl">
                  <div class="wmd-prompt-dialog image">
                    <h2>Add Image</h2>
                    <div class="tabs">
                      <label><input type="radio" name="tab" onclick="$('#image-form input').hide();$('#image-upload').show()" checked="checked" /> From my computer</label><br />
                      <label><input type="radio" name="tab" onclick="$('#image-form input').hide();$('#image-input').show()" /> From the web</label>
                    </div>
                    <div class="cont">
                      <form enctype="multipart/form-data" method="post" action="/upload-image/" target="target_iframe" id="image-form">
                        {% csrf_token %}
                        <input type="file" name="image" id="image-upload" />
                        <input style="display:none" placeholder="http://" id="image-input" size="32" />
                      </form>
                      <iframe id="target_iframe" name="target_iframe" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
                    </div>
                    <div style="clear:both;">
                    <p style="text-align:center">
                      <input type="button" value="OK" class="btn-ok button" />
                      <input type="button" value="Cancel" class="btn-cancel button" />
                    </p>
                  </div>
                </script>
								<script>
								(function(){
									var conv = new Markdown.Converter(); window.$ = django.jQuery;
									var editor = new Markdown.Editor(conv, '', {handler: function(){
										window.open('http://stackoverflow.com/editing-help');
										return false;
									}});
                  editor.hooks.set('insertImageDialog', function (callback) {
                    var dlg = $($('#image-popup-tpl').html());
                    $(document.body).append(dlg);

                    window._image_callback_ = function (url) {
                      dlg.remove();
                      callback(url);
                    };

                    dlg.find('.btn-cancel').click(function () {
                      _image_callback_(null);
                    });

                    dlg.find('.btn-ok').click(function () {
                      var link, input = $('#image-input');
                      if (input.is(':visible')) {
                        link = input.val();
                        _image_callback_(link || null);
                      } else {
                        $(this).attr('disabled', 'disabled').val('Waiting...');
                        $('#image-form').submit();
                      }
                    });

                    return true;
                  });
									editor.run();
									// hold
									window.onbeforeunload = function(e){
										e = e || window.event;
										if (e){
											e.returnValue = '放弃此次编辑？';
										}
										return '放弃此次编辑？';
									}
									$('#post_form').submit(function(){ window.onbeforeunload = null; });
								})();
								</script>
							{% else %}
								{{ field.field }}
							{% endif %}
                        {% endif %}
                    {% endif %}
                    {% if field.field.help_text %}
                        <p class="help">{{ field.field.help_text|safe }}</p>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</fieldset>
